import kgGraph from './kgGraph';
let vm = null
const sendThis = (_this) => {
  vm = _this
}
export default {
  sendThis,
  createGraph(container) {
    const width = container.scrollWidth;
    const height = container.scrollHeight || 500;
    const graph = new kgGraph({
      container: 'container',
      width,
      height,
      // animate:true,
      // fitView:true,
      linkCenter: true,
      layout: {
        type: 'force',
        skipAnimation: true,
        preventOverlap: true,
        distance: (d) => (d.source.size + d.target.size) * 1.5 + 50,
        nodeStrength: -400,
        edgeStrength: (d) => {
          return 1;
        },
      },
      defaultNode: {
        size: 30,
        style: {
          lineWidth: 2,
          fill: '#C6E5FF',//节点颜色
        },
        labelCfg: {//标题属性
          position: 'top',
          style: {
            fill: '#333333',
            fontSize: 12,
          },
        },
      },
      defaultEdge: {
        type: 'line',
        size: 1,
        color: '#d2d2d2',//线颜色
        labelCfg: {//关系名称属性
          autoRotate: true,
          style: {
            fill: '#1890ff',
            opacity: 0,
          },
        },
      },
      modes: {
        default: [
          'drag-canvas',
          'zoom-canvas',
          'drag-node',
          'highlight-related',
          'activate-node',
          {
            type: 'node-contextmenu',
            menu: [],
          },
        ],
      },
    });

    graph.on('node:dragstart', function (e) {
      graph.layout();
      refreshDragedNodePosition(e);
    });
    graph.on('node:drag', function (e) {
      refreshDragedNodePosition(e);
    });
    graph.on('node:dragend', function (e) {
      e.item.get('model').fx = null;
      e.item.get('model').fy = null;

    });

    graph.on('node:mouseenter', (evt) => {
      const { item } = evt;
      const edges = item.getEdges();
      edges.forEach((edge) => {
        edge.toFront();
        edge.getSource().toFront();
        edge.getTarget().toFront();
      });
      graph.paint();
      graph.setItemState(item, 'hover', true);
    });

    graph.on('node:mouseleave', (evt) => {
      const { item } = evt;
      const edges = graph.getEdges();
      edges.forEach((edge) => {
        edge.toBack();
      });
      graph.paint();
      graph.setItemState(item, 'hover', false);
    });

    let timeId = null;
    //👈左键👈--点击节点
    graph.on('node:click', (evt) => {
      clearTimeout(timeId)
      timeId = setTimeout(function () {
        vm.clickNode(evt.item)
      }, 300)
    });

    //👈左键👈--双击节点
    graph.on('node:dblclick', (evt) => {
      clearTimeout(timeId)
      vm.dblclickNode(evt.item)
    });

    //👉右键👉--单击事件
    let nodeMenu = document.getElementById("nodeContextMenu");
    graph.on("node:contextmenu", (evt) => {
      evt.preventDefault();
      evt.stopPropagation();
      clearTimeout(timeId)
      timeId = setTimeout(function () {
        if (graph.isAddRelation) {
          Message({
            message: "请选择关联接点",
            type: "warning",
          });
        } else {
          nodeMenu.style.display = 'block'
          nodeMenu.style.left = evt.clientX + 10 + "px";
          nodeMenu.style.top = evt.clientY + "px";
          vm.contextMenuNode(evt.item);
        }
      }, 300)
    });
    //弹出层禁止右击事件
    nodeMenu.oncontextmenu = function (evt) {
      evt.preventDefault();
      evt.stopPropagation();
    }

     //右键 - 边
     let menuRelation = document.getElementById("relationContextMenu");
     graph.on("edge:contextmenu", (evt) => {
       return
      evt.preventDefault();
      evt.stopPropagation();
      if (graph.isAddRelation) {
        Message({
          message: "请选择关联接点",
          type: "warning",
        });
      } else {
        menuRelation.style.left = evt.clientX + "px";
        menuRelation.style.top = evt.clientY + "px";
        vm.rightClickRelationContextmenu(evt.item);
      }
    });
    
    graph.on('edge:mouseenter', (evt) => {
      return

      const { item } = evt;
      const source = item.getSource();
      const target = item.getTarget();
      item.toFront();
      source.toFront();
      target.toFront();
      graph.paint();
      graph.setItemState(item, 'hover', true);
      try {
        graph.updateItem(item, {
          labelCfg: {
            style: {
              opacity: 1,
            },
          },
        });
      } catch (error) {

      }
    });

    graph.on('edge:mouseenter', (evt) => {
      return

      const { item } = evt;
      const source = item.getSource();
      const target = item.getTarget();
      item.toFront();
      source.toFront();
      target.toFront();
      graph.paint();
      graph.setItemState(item, 'hover', true);
      try {
        graph.updateItem(item, {
          color: '#1890ff',
          labelCfg: {
            style: {
              opacity: 1,
            },
          },
        });
      } catch (error) {

      }
    });

    graph.on('edge:mouseleave', (evt) => {
      return

      const edges = graph.getEdges();
      edges.forEach((edge) => {
        edge.toBack();
      });
      graph.paint();
      const { item } = evt;
      graph.setItemState(item, 'hover', false);
      try {
        graph.updateItem(item, {
          color: '#d2d2d2',
          labelCfg: {
            style: {
              opacity: 0,
            },
          },
        });
      } catch (error) {

      }
    });

    graph.on('canvas:click', (evt) => {
      vm.canvasClick(evt)
    });

    if (typeof window !== 'undefined')
      window.onresize = () => {
        if (!graph || graph.get('destroyed')) return;
        if (!container || !container.scrollWidth || !container.scrollHeight) return;
        graph.changeSize(container.scrollWidth, container.scrollHeight);
      };

    function refreshDragedNodePosition(e) {
      const model = e.item.get('model');
      model.fx = e.x;
      model.fy = e.y;
      let nodeMenu = document.getElementById("nodeContextMenu");
      nodeMenu.style.display = "none";
    }

    return graph
  }

}